﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ZhiBo/ZBneirong.Master" AutoEventWireup="true" CodeBehind="ZBneirong.aspx.cs" Inherits="Player.ZhiBo.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style>
        * {
        padding:0px;
        margin:0px;
        }
        
        #Max {
        width:100%;
        height:500px;
        background-color:red;
        }
        /*左边样式*/
        #right {
        width:17%;
        height:100%;
        background-color:white;
        position:relative;
        }
        #top-right {
        width:100%;
        height:150px;
        background-color:white;
        position:relative;
        }
       #top-right .top-img1 {
           width:130px;
           height:120px;
           margin-left:20px;
           
        }
            #top-right .txbig {
            width:110px;
            height:25px;
            background-color:#f4f4f4;
            border-radius:50px;
            position:absolute;
            top:90px;
            left:30px;
            }
        .txbig .tx {
        width:25px;
        height:25px;
        background-color:red;
        float:left;
        border-radius:100%;
        }
            .txbig .span {
            font-size:12px;
            transform:scale(0.90);
            line-height:25px;
            float:left;
            }
        .tb-item {
        width:150px;
        height:25px;
        margin-left:10px;
        }
            .tb-item .bt-item-tpimg {
            width:18px;
            height:12px;
            float:left;
            margin-top:7px;
            }
        .tb-item .span1{
        display:block;
        font-size:12px;
        line-height:25px;
        float:left;
        }
            .tb-item .rebo-item {
            color:orange;
            transform:scale(0.90);
            font-weight:bold;
            }
        #right-item {
        width:100%;
        height:300px;
        margin-top:8px;
        background-color:white;
        }
        #right-item .toxiang {
        width:100%;
        height:40px;
        float:left;
        }
        .toxiang .tx-item {
        width:35px;
        height:35px;
        border-radius:100%;
        margin-top:2px;
        background-color:red;
        float:left;
        }
        .toxiang .sp1-item {
        font-size:12px;
        color:#d5d5d5;
        margin-left:5px;
        }
        .toxiang .sp2-item {
        font-size:12px;
        color:#777777;
        transform:scale(0.80);
        margin-left:5px;
        margin-bottom:3px;
        }
        /*头部样式*/
        #top {
        width:83%;
        height:50px;
        background-color:white;
        border:1px solid #ccc;
        position:absolute;
        top:0px;
        right:0px;
        }
        .top-item {
        width:400px;
        height:50px;
        position:relative;
        }
            .top-item .tx-item {
            width:40px;
            height:40px;
            border-radius:100%;
            margin-left:10px;
            background-color:red;
            position:absolute;
            top:4px;
            }
            .top-item .span1-item {
                margin-left:60px;
                position:absolute;
                top:5px;
            }
            .top-item .span2-item {
            position:absolute;
            top:30px;
            left:60px;
            color:#ccc;
            font-size:1px;
            transform:scale(0.80);
            }
            .top-item .rz {
            width:10px;
            height:10px;
            position:absolute;
            top:33px;
            left:110px;
            }
        .yx-item {
        width:90px;
        height:17px;
        background-color:#ff8d13;
        position:absolute;
        top:30px;
        left:150px;
        border-radius:10px;
        cursor:pointer;
        }
        .yx-img {
        width:18px;
        height:18px;
        margin-left:10px;
        }
        .yx-item .yxlm {
        font-size:1px;
        transform:scale(0.80);
        color:white;
        position:absolute;
        top:1px;
        }
        /*中间样式*/
        #middle {
        width:66%;
        height:449px;
        background-color:#000;
        position:absolute;
        top:52px;
        left:170px;
        }
        .middle video {
        outline:none;
        margin-left:2px;
        }
        /*用户评论*/
        #left {
        width:18%;
        height:449px;
        background-color:#f4f4f4;
        position:relative;
        position:absolute;
        top:52px;
        right:0px;

        }
            #left .pl-item {
            width:100%;
            height:40px;
            background-color:#eee;
            position:absolute;
            bottom:0px;
            }
        .pl-item .input1 {
            width:150px;
            height:15px;
            border-radius:10px;
            outline:none;
            border:1px solid #ccc;
            margin-top:10px;
            margin-left:10px;
        }
        .pl-item .fa {
        position:absolute;
        top:9px;
        right:17px;
        width:40px;
        height:19px;
        font-size:1px;
        transform:scale(0.80);
        font-weight:bold;
        border:1px solid orange;
        outline:none;
        background-color:#f7dc8b;
        border-radius:0px 10px 10px 0px;
        
        }

    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <form id="form1" runat="server">
   <div id="Max">
       <%--左边部分--%>
       <div id="right">
           <div id="top-right">
               <%--<img src="../../Player图片/图标/直播内容页/虎牙logo/huyalogo.jpg" class="top-img1"/>--%>
               <%--<img src="../../Player图片/图标/直播内容页/虎牙logo/uugai.com_1615193087167.png" class="top-img1" />--%>
               <img src="../../Player图片/图标/直播内容页/虎牙logo/uugai.com-1615193066167.png" class="top-img1" />
               <div class="txbig">
                   <asp:Image CssClass="tx" ID="img_tx" runat="server" />
                   <span class="span">用户名称</span>
               </div>
               <div class="tb-item">
                   <img src="../../Player图片/图标/直播内容页/直播内容矢量/kaishi .svg" class="bt-item-tpimg"/>
                   <%--<img src="../../Player图片/图标/直播内容页/虎牙logo/uugai.com_1615193087167.png" class="bt-item-tpimg" />--%>
                   <span class="span1 huya-item">Player直播&nbsp;&nbsp;</span>
                   <span class="span1 rebo-item">正在热播</span>
               </div>
           </div>
         <div id="right-item">
            <div class="toxiang">
                <div class="tx-item">

                </div>
                <span class="sp1-item">我是bigbig，不是PGPG</span>
                <span class="sp2-item">英雄联盟</span>
            </div>
         </div>
       </div>
       <%--头部部分--%>
       <div id="top">
           <div class="top-item">
               <div class="tx-item">

               </div>
               <span class="span1-item">【随机英雄挑战】 目前21胜0败</span>
               <span class="span2-item">主播名称</span>
               <img src="../../Player图片/图标/直播内容页/直播内容矢量/renzheng.svg" alt="" class="rz"/>
               <div class="yx-item">
                   <img src="../../Player图片/图标/直播内容页/直播内容矢量/yx.svg" alt="" class="yx-img"/>
                   <span class="yxlm">英雄联盟</span>
               </div>
           </div>
       </div>
       <%--视频部分--%>
       <div id="middle">
               <%--<video src="../../视频/游戏视频/X变体：防御.mp4"  width="675" height="449" controls="controls" loop="loop" autoplay="autoplay" class="sp-item" />--%>
           <asp:Repeater ID="rpttv" runat="server">
                    <ItemTemplate>
                        <video src='<%#"../../视频/直播视频/"+Eval("Lv_Tv")%>' width="670px" loop="loop" autoplay="autoplay" height="440px" controls="controls">
                        </video>
                    </ItemTemplate>
                </asp:Repeater>
       </div>
       <%--用户发布评论--%>
       <div id="left">
           <div class="pl-item">
               <input type="text" name="name" value=" " placeholder="让弹幕飞起来" class="input1"/>
               <button class="fa" />发送</button>
           </div>
       </div>
   </div>
    </form>
</asp:Content>
